<template>
  <div class="visitor-container">
    <!-- 分屏布局 -->
    <div class="split-screen-layout">
      <!-- 左侧搜索与筛选面板 -->
      <div class="left-panel">
        <div class="search-panel">
          <h2 class="panel-title">景点搜索</h2>

          <!-- 搜索框 -->
          <div class="search-box">
            <el-input
              v-model="searchQuery"
              placeholder="搜索景点名称"
              clearable
              prefix-icon="Search"
              @input="filterAttractions"
            />
          </div>

          <!-- 高级筛选 -->
          <div class="filter-section">
            <div class="filter-header">
              <h3>高级筛选</h3>
              <el-button type="text" @click="resetFilters">重置</el-button>
            </div>

            <!-- 景点类型筛选 -->
            <div class="filter-item">
              <span class="filter-label">景点类型</span>
              <el-select
                v-model="filters.spotType"
                placeholder="全部类型"
                clearable
                @change="filterAttractions"
              >
                <el-option label="全部类型" value="" />
                <el-option label="历史文化" value="历史文化" />
                <el-option label="自然风光" value="自然风光" />
                <el-option label="休闲娱乐" value="休闲娱乐" />
              </el-select>
            </div>

            <!-- 保护级别筛选 -->
            <div class="filter-item">
              <span class="filter-label">保护级别</span>
              <el-select
                v-model="filters.protectionLevel"
                placeholder="全部级别"
                clearable
                @change="filterAttractions"
              >
                <el-option label="全部级别" value="" />
                <el-option label="国家级" value="国家级" />
                <el-option label="省级" value="省级" />
                <el-option label="市级" value="市级" />
                <el-option label="区县级" value="区县级" />
              </el-select>
            </div>

            <!-- 建设年份筛选 -->
            <div class="filter-item">
              <span class="filter-label">建设年份</span>
              <el-select
                v-model="filters.constructionYear"
                placeholder="全部年份"
                clearable
                @change="filterAttractions"
              >
                <el-option label="全部年份" value="" />
                <el-option label="明朝以前" value="before-ming" />
                <el-option label="明朝" value="ming" />
                <el-option label="清朝" value="qing" />
                <el-option label="民国" value="minguo" />
                <el-option label="新中国成立后" value="after-1949" />
              </el-select>
            </div>

            <!-- 保护状态筛选 -->
            <div class="filter-item">
              <span class="filter-label">保护状态</span>
              <el-select
                v-model="filters.protectionStatus"
                placeholder="全部状态"
                clearable
                @change="filterAttractions"
              >
                <el-option label="全部状态" value="" />
                <el-option label="良好" value="良好" />
                <el-option label="一般" value="一般" />
                <el-option label="需修缮" value="需修缮" />
              </el-select>
            </div>
          </div>

          <!-- 筛选结果列表 -->
          <div class="results-section">
            <div class="results-header">
              <h3>
                景点列表 <span class="count-badge">{{ filteredAttractions.length }}</span>
              </h3>
            </div>

            <el-scrollbar height="calc(100vh - 450px)">
              <div class="attraction-list">
                <div
                  v-for="attraction in filteredAttractions"
                  :key="attraction.OBJECTID"
                  class="attraction-item"
                  :class="{ active: currentAttraction?.OBJECTID === attraction.OBJECTID }"
                  @click="selectAttraction(attraction as Attraction)"
                >
                  <div class="attraction-item-content">
                    <h4>{{ attraction.SpotName }}</h4>
                    <div class="attraction-tags">
                      <el-tag
                        :type="getTypeTagType(attraction.SpotType)"
                        size="small"
                        effect="light"
                      >
                        {{ getTypeLabel(attraction.SpotType || '') }}
                      </el-tag>
                      <el-tag
                        v-if="attraction.ProtectionLevel"
                        type="warning"
                        size="small"
                        effect="light"
                      >
                        {{ attraction.ProtectionLevel }}
                      </el-tag>
                    </div>
                    <p class="attraction-brief" v-if="attraction.SpotIntroduction">
                      {{ truncateText(attraction.SpotIntroduction, 50) }}
                    </p>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>

      <!-- 右侧地图区域 -->
      <div class="right-panel">
        <div ref="visitorMapView" class="visitor-map-view"></div>

        <!-- 智能规划悬浮按钮 -->
        <div class="plan-button" @click="showPlanningPanel = true">
          <el-icon>
            <LocationInformation />
          </el-icon>
          <span>智能规划</span>
        </div>
      </div>
    </div>

    <!-- 景点信息区域 -->
    <el-drawer
      v-model="showAttractionInfo"
      direction="rtl"
      size="360px"
      :with-header="false"
      class="custom-drawer"
    >
      <div v-if="currentAttraction" class="attraction-detail">
        <div class="attraction-header">
          <h2>{{ currentAttraction.SpotName }}</h2>
          <el-button
            v-if="!selectedAttractions.includes(currentAttraction.OBJECTID)"
            type="primary"
            size="small"
            @click="addToRoute(currentAttraction as Attraction)"
          >
            <el-icon>
              <Plus />
            </el-icon>
            添加到行程
          </el-button>
          <el-button
            v-else
            type="danger"
            size="small"
            @click="removeFromRoute(currentAttraction.OBJECTID)"
          >
            <el-icon>
              <Delete />
            </el-icon>
            移除
          </el-button>
        </div>

        <!-- 景点基本信息 -->
        <div class="attraction-info-section">
          <!-- 景点类型标签 -->
          <div class="attraction-type">
            <el-tag :type="getTypeTagType(currentAttraction.SpotType)" effect="light">
              {{ getTypeLabel(currentAttraction.SpotType || '') }}
            </el-tag>

            <!-- 保护级别标签 -->
            <el-tag v-if="currentAttraction.ProtectionLevel" type="warning" effect="light">
              {{ currentAttraction.ProtectionLevel }}
            </el-tag>

            <!-- 保护状态标签 -->
            <el-tag
              v-if="currentAttraction.ProtectionStatus"
              :type="getProtectionStatusTagType(currentAttraction.ProtectionStatus)"
              effect="light"
            >
              {{ currentAttraction.ProtectionStatus }}
            </el-tag>
          </div>

          <!-- 建设年份 -->
          <div v-if="currentAttraction.ConstructionYear" class="construction-year">
            <span class="info-label">建设年份:</span>
            <span class="info-value">{{ currentAttraction.ConstructionYear }}</span>
          </div>
        </div>

        <!-- 景点图片 -->
        <div v-if="currentAttraction.IntroduceImageBase64" class="attraction-image">
          <img :src="currentAttraction.IntroduceImageBase64" alt="景点图片" />
        </div>

        <!-- 景点介绍 -->
        <div class="attraction-intro">
          <h3>景点介绍</h3>
          <p>{{ currentAttraction.SpotIntroduction || '暂无介绍信息' }}</p>
        </div>

        <!-- 历史价值 -->
        <div v-if="currentAttraction.HistoricalValue" class="attraction-section">
          <h3>历史价值</h3>
          <p>{{ currentAttraction.HistoricalValue }}</p>
        </div>

        <!-- 文化价值 -->
        <div v-if="currentAttraction.CulturalValue" class="attraction-section">
          <h3>文化价值</h3>
          <p>{{ currentAttraction.CulturalValue }}</p>
        </div>

        <!-- 参观规则 -->
        <div v-if="currentAttraction.VisitRules" class="attraction-section">
          <h3>参观规则</h3>
          <p>{{ currentAttraction.VisitRules }}</p>
        </div>

        <!-- 学习提示 -->
        <div v-if="currentAttraction.LearningTips" class="attraction-section">
          <h3>学习提示</h3>
          <p>{{ currentAttraction.LearningTips }}</p>
        </div>
      </div>
    </el-drawer>

    <!-- 智能规划面板 -->
    <el-drawer
      v-model="showPlanningPanel"
      direction="rtl"
      size="400px"
      :with-header="false"
      class="custom-drawer"
    >
      <div class="planning-panel">
        <div class="drawer-header">
          <h2>智能行程规划</h2>
        </div>

        <!-- 偏好设置 -->
        <div class="preference-section">
          <h3>游览偏好设置</h3>
          <el-form :model="preferences" label-position="top">
            <el-form-item label="计划游览时间">
              <el-slider
                v-model="preferences.visitDuration"
                :min="1"
                :max="8"
                :step="0.5"
                show-input
                :format-tooltip="formatHours"
              />
            </el-form-item>
            <el-form-item label="最多景点数量">
              <el-slider
                v-model="preferences.maxAttractions"
                :min="2"
                :max="10"
                :step="1"
                show-input
              />
            </el-form-item>
            <el-form-item label="景点类型偏好">
              <el-checkbox-group v-model="preferences.spotTypes">
                <el-checkbox label="historical">历史文化</el-checkbox>
                <el-checkbox label="natural">自然风光</el-checkbox>
                <el-checkbox label="entertainment">休闲娱乐</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            @click="generateRecommendation"
            :loading="isGenerating"
            class="full-width-btn"
          >
            智能推荐路线
          </el-button>
        </div>

        <!-- 已选景点列表 -->
        <div class="selected-spots-section" v-if="selectedAttractions.length > 0">
          <h3>
            已选景点 <span class="count-badge">{{ selectedAttractions.length }}</span>
          </h3>
          <el-scrollbar height="200px">
            <el-timeline>
              <el-timeline-item
                v-for="(id, index) in selectedAttractions"
                :key="id"
                :timestamp="getAttractionById(id)?.SpotName"
                :type="index === 0 ? 'primary' : ''"
              >
                <div class="timeline-spot-item">
                  <el-button type="danger" circle size="small" @click="removeFromRoute(id)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                  <el-button
                    v-if="index !== 0"
                    type="primary"
                    circle
                    size="small"
                    @click="moveUp(index)"
                  >
                    <el-icon>
                      <ArrowUp />
                    </el-icon>
                  </el-button>
                  <el-button
                    v-if="index !== selectedAttractions.length - 1"
                    type="primary"
                    circle
                    size="small"
                    @click="moveDown(index)"
                  >
                    <el-icon>
                      <ArrowDown />
                    </el-icon>
                  </el-button>
                </div>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>

          <!-- 导航模式选择 -->
          <div class="navigation-mode-section">
            <h3>导航方式</h3>
            <el-radio-group v-model="navigationMode" size="large">
              <el-radio-button label="driving">
                <el-icon><Van /></el-icon> 驾车
              </el-radio-button>
              <el-radio-button label="walking">
                <el-icon><Guide /></el-icon> 步行
              </el-radio-button>
              <el-radio-button label="bicycling">
                <el-icon><Bicycle /></el-icon> 骑行
              </el-radio-button>
              <el-radio-button label="transit">
                <el-icon><Ship /></el-icon> 公交
              </el-radio-button>
            </el-radio-group>
          </div>

          <div class="route-planning-actions">
            <el-button
              type="success"
              @click="calculateRoute"
              :loading="isCalculating"
              :disabled="selectedAttractions.length < 2"
              class="full-width-btn"
            >
              开始规划路线
            </el-button>
            <el-button type="danger" @click="clearRoute" class="full-width-btn">
              清空行程
            </el-button>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 路线详情卡片 -->
    <div class="route-card" v-if="showRouteDetails">
      <div class="route-header">
        <h3>最佳游览路线</h3>
        <el-button
          class="close-btn"
          type="info"
          circle
          size="small"
          @click="showRouteDetails = false"
        >
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>

      <div class="route-summary">
        <div class="summary-item">
          <el-icon>
            <Pointer />
          </el-icon>
          <span>{{ selectedAttractions.length }}个景点</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Position />
          </el-icon>
          <span>{{ (totalDistance / 1000).toFixed(1) }}km</span>
        </div>
        <div class="summary-item">
          <el-icon>
            <Timer />
          </el-icon>
          <span>约{{ Math.ceil(totalTime / 60) }}分钟</span>
        </div>
      </div>

      <div class="navigation-mode-info">
        <span class="mode-label">导航方式：</span>
        <el-tag :type="getNavigationModeTagType(navigationMode)">
          {{ getNavigationModeText(navigationMode) }}
        </el-tag>
      </div>

      <el-collapse accordion>
        <el-collapse-item
          v-for="(step, index) in routeInstructions"
          :key="index"
          :title="`第${index + 1}段路线`"
        >
          <div class="step-info">
            <div class="step-header">
              <div class="step-icon" :class="getNavigationModeClass(navigationMode)">
                <el-icon v-if="navigationMode === 'driving'"><Van /></el-icon>
                <el-icon v-else-if="navigationMode === 'walking'"><Guide /></el-icon>
                <el-icon v-else-if="navigationMode === 'bicycling'"><Bicycle /></el-icon>
                <el-icon v-else-if="navigationMode === 'transit'"><Ship /></el-icon>
              </div>
              <div class="step-title-container">
                <div class="step-title">{{ step.start }} → {{ step.end }}</div>
                <div class="step-detail">
                  <span class="distance">{{ (step.distance / 1000).toFixed(1) }}公里</span>
                  <span class="separator">·</span>
                  <span class="time">约{{ Math.ceil(step.time / 60) }}分钟</span>
                </div>
              </div>
            </div>
            <div class="step-preview">
              <div class="preview-text">
                <span v-if="step.instructions.length > 0">{{
                  truncateText(step.instructions[0], 30)
                }}</span>
                <span v-if="step.instructions.length > 1">{{
                  truncateText(step.instructions[1], 30)
                }}</span>
              </div>
              <div class="step-count">共{{ step.instructions.length }}个指引</div>
            </div>
            <el-button
              type="primary"
              plain
              size="small"
              class="view-details-btn"
              @click="showStepDetails(step)"
            >
              <el-icon><LocationInformation /></el-icon> 查看详细指引
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div class="card-actions">
        <el-button type="primary" size="small" @click="startNavigation" :disabled="isNavigating">
          开始导航
        </el-button>
        <el-button type="danger" size="small" @click="clearRoute"> 清空路线 </el-button>
      </div>
    </div>

    <!-- 导航提示 -->
    <div class="navigation-hint" v-if="isNavigating">
      <div class="hint-content">
        <div class="current-instruction">{{ currentNavigationStep }}</div>
        <div class="next-step" v-if="nextNavigationStep">
          <span>下一步:</span>
          <span>{{ nextNavigationStep }}</span>
        </div>
      </div>
      <el-progress
        :percentage="navigationProgress"
        :stroke-width="8"
        :format="progressFormat"
      ></el-progress>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, h } from 'vue'
import {
  LocationInformation,
  Plus,
  Delete,
  ArrowUp,
  ArrowDown,
  Pointer,
  Position,
  Timer,
  Close,
  Van,
  Guide,
  Bicycle,
  Ship,
} from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
// import Point from '@arcgis/core/geometry/Point'
import Polyline from '@arcgis/core/geometry/Polyline'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { getGaoDeRoute,type NavigationMode } from '@/utils/gaodeAPI'

// 景点类型定义
interface Attraction {
  OBJECTID: number
  SpotName: string
  SpotIntroduction?: string
  SpotType?: string
  IntroduceImageBase64?: string
  geometry?: __esri.Geometry
  // 添加从FeatureManagement中的字段
  ProtectionLevel?: string
  ConstructionYear?: string
  ProtectionStatus?: string
  HistoricalValue?: string
  CulturalValue?: string

  LearningTips?: string
  VisitRules?: string
  UncivilizedBehaviorReportCount?: number
}
interface RouteInstruction {
  start: string // 起始点名称
  end: string // 终点名称
  distance: number // 路段距离（米）
  time: number // 预计时间（秒）
  instructions: string[] // 分段导航指令
}

// 地图和视图
let map: __esri.Map
let view: __esri.MapView
const visitorMapView = ref<HTMLDivElement>()

// 景点数据
const attractions = ref<Attraction[]>([])
let attractionsLayer: __esri.FeatureLayer | null = null
const currentAttraction = ref<Attraction | null>(null)
const showAttractionInfo = ref(false)

// 搜索和筛选
const searchQuery = ref('')
const filteredAttractions = ref<Attraction[]>([])
const filters = reactive({
  spotType: '',
  protectionLevel: '',
  constructionStatus: '',
  constructionYear: '',
  protectionStatus: '',
})

// 路线规划
const showPlanningPanel = ref(false)
const selectedAttractions = ref<number[]>([])
const isGenerating = ref(false)
const isCalculating = ref(false)
const routeGraphics: __esri.Graphic[] = []
const navigationMode = ref<NavigationMode>('driving') // 导航模式，默认驾车

// 用户偏好设置
const preferences = reactive({
  visitDuration: 4, // 小时
  maxAttractions: 5, // 最大景点数
  spotTypes: ['历史文化', '自然风光', '休闲娱乐'], // 景点类型偏好
})

// 路线详情
const showRouteDetails = ref(false)
const routeInstructions = ref<RouteInstruction[]>([])
const totalDistance = ref(0)
const totalTime = ref(0)

// 导航状态
const isNavigating = ref(false)
const currentNavigationStep = ref('')
const nextNavigationStep = ref('')
const navigationProgress = ref(0)
const currentStepIndex = ref(0)

// 地图初始化
onMounted(async () => {
  await initMap()
  await loadAttractions()
})

// 初始化地图
async function initMap() {
  map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  // 创建景点图层
  attractionsLayer = new FeatureLayer({
    url: 'https://services7.arcgis.com/2irArZCaO94Te7ab/arcgis/rest/services/ScenicPointLayer/FeatureServer/0',
    outFields: ['*'],
    popupEnabled: false,
    renderer: {
      type: 'unique-value',
      field: 'SpotType',
      defaultSymbol: {
        type: 'simple-marker',
        size: 16,
        color: [156, 156, 156, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 2,
        },
      },
      uniqueValueInfos: [
        {
          value: '历史文化',
          symbol: {
            type: 'simple-marker',
            style: 'square',
            size: 16,
            color: [225, 76, 66, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '自然风光',
          symbol: {
            type: 'simple-marker',
            style: 'circle',
            size: 16,
            color: [56, 168, 0, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '休闲娱乐',
          symbol: {
            type: 'simple-marker',
            style: 'diamond',
            size: 16,
            color: [0, 112, 255, 0.8],
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
      ],
    },
    // 添加标注
    labelingInfo: [
      {
        symbol: {
          type: 'text',
          color: '#333333',
          haloColor: '#ffffff',
          haloSize: 2,
          font: {
            size: 12,
            weight: 'normal',
          },
        },
        labelPlacement: 'above-center',
        labelExpressionInfo: {
          expression: '$feature.SpotName',
        },
        minScale: 5000,
        maxScale: 0,
      },
    ],
  })

  map.add(attractionsLayer)

  // 创建地图视图
  view = new MapView({
    container: visitorMapView.value!,
    map: map,
    center: [116.3912, 39.9073], // 北京市中心坐标
    zoom: 15,
  })

  // 点击事件
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]
    // 检查是否点击了景点
    const feature = hitResults.find((result) => result.layer?.id === attractionsLayer?.id)?.graphic

    if (feature) {
      currentAttraction.value = feature.attributes
      showAttractionInfo.value = true
    }
  })
}

// 获取类型标签的样式
const getTypeTagType = (type: string = '') => {
  switch (type) {
    case '历史文化':
      return 'danger'
    case '自然风光':
      return 'success'
    case '休闲娱乐':
      return 'primary'
    default:
      return 'info'
  }
}

// 获取保护状态标签的样式
const getProtectionStatusTagType = (status: string = '') => {
  switch (status) {
    case '良好':
      return 'success'
    case '一般':
      return 'warning'
    case '需修缮':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取导航模式标签的样式
const getNavigationModeTagType = (mode: NavigationMode) => {
  switch (mode) {
    case 'driving':
      return 'danger'
    case 'walking':
      return 'success'
    case 'bicycling':
      return 'warning'
    case 'transit':
      return 'primary'
    default:
      return 'info'
  }
}

// 获取导航模式的文本
const getNavigationModeText = (mode: NavigationMode) => {
  switch (mode) {
    case 'driving':
      return '驾车'
    case 'walking':
      return '步行'
    case 'bicycling':
      return '骑行'
    case 'transit':
      return '公交'
    default:
      return '驾车'
  }
}

// 获取导航模式的样式类
const getNavigationModeClass = (mode: NavigationMode) => {
  switch (mode) {
    case 'driving':
      return 'mode-driving'
    case 'walking':
      return 'mode-walking'
    case 'bicycling':
      return 'mode-bicycling'
    case 'transit':
      return 'mode-transit'
    default:
      return 'mode-driving'
  }
}

// 获取类型标签的文本
const getTypeLabel = (value: string) => {
  return value || '未分类'
}

// 加载景点数据
async function loadAttractions() {
  try {
    const query = attractionsLayer!.createQuery()
    query.where = '1=1'
    query.outFields = ['*']

    const results = await attractionsLayer!.queryFeatures(query)
    attractions.value = results.features.map((f) => f.attributes)
    filteredAttractions.value = [...attractions.value] // 初始化筛选结果

    ElMessage.success(`已加载${attractions.value.length}个景点`)
  } catch (error) {
    console.error('加载景点失败', error)
    ElMessage.error('加载景点数据失败')
  }
}

// 根据ID获取景点
function getAttractionById(id: number) {
  return attractions.value.find((a) => a.OBJECTID === id)
}

// 添加景点到路线
function addToRoute(attraction: Attraction) {
  if (!selectedAttractions.value.includes(attraction.OBJECTID)) {
    selectedAttractions.value.push(attraction.OBJECTID)
    ElMessage.success(`已将 ${attraction.SpotName} 添加到行程`)
  }
}

// 从路线移除景点
function removeFromRoute(id: number) {
  const index = selectedAttractions.value.indexOf(id)
  if (index > -1) {
    const name = getAttractionById(id)?.SpotName
    selectedAttractions.value.splice(index, 1)
    ElMessage.info(`已将 ${name} 从行程中移除`)
  }
}

// 上移景点顺序
function moveUp(index: number) {
  if (index > 0) {
    const temp = selectedAttractions.value[index]
    selectedAttractions.value[index] = selectedAttractions.value[index - 1]
    selectedAttractions.value[index - 1] = temp
  }
}

// 下移景点顺序
function moveDown(index: number) {
  if (index < selectedAttractions.value.length - 1) {
    const temp = selectedAttractions.value[index]
    selectedAttractions.value[index] = selectedAttractions.value[index + 1]
    selectedAttractions.value[index + 1] = temp
  }
}

// 智能推荐路线
function generateRecommendation() {
  isGenerating.value = true

  // 清空当前选择
  selectedAttractions.value = []

  setTimeout(() => {
    // 根据偏好过滤景点
    let filteredAttractions = [...attractions.value]

    // 根据景点类型偏好过滤
    if (preferences.spotTypes.length > 0) {
      filteredAttractions = filteredAttractions.filter((attraction) => {
        // 这里根据实际数据结构调整类型判断逻辑
        const type = attraction.SpotType || ''
        return preferences.spotTypes.some((prefType) => {
          if (prefType === '历史文化') return /历史|文化|古/.test(type)
          if (prefType === '自然风光') return /自然|风景|公园|湖/.test(type)
          if (prefType === '休闲娱乐') return /娱乐|休闲|购物/.test(type)
          return false
        })
      })
    }

    // 如果过滤后没有景点，使用全部景点
    if (filteredAttractions.length === 0) {
      filteredAttractions = [...attractions.value]
    }

    // 按照流行度排序（假设有流行度字段，没有则随机排序）
    filteredAttractions.sort(() => Math.random() - 0.5)

    // 选择不超过最大景点数量的景点
    const maxSpots = Math.min(preferences.maxAttractions, filteredAttractions.length)

    // 添加到路线
    for (let i = 0; i < maxSpots; i++) {
      selectedAttractions.value.push(filteredAttractions[i].OBJECTID)
    }

    isGenerating.value = false

    ElMessage.success(`已为您智能推荐${selectedAttractions.value.length}个景点`)
  }, 1000)
}

function showStepDetails(step: RouteInstruction) {
  ElMessageBox({
    title: `${step.start} → ${step.end} 路线指引`,
    customClass: 'route-details-dialog',
    message: h('div', { class: 'route-details-container' }, [
      // 路线概要信息
      h('div', { class: 'route-summary-banner' }, [
        h('div', { class: 'route-summary-content' }, [
          h('div', { class: 'route-mode-text' }, getNavigationModeText(navigationMode)),
          h('div', { class: 'route-stats' }, [
            `总距离: ${(step.distance / 1000).toFixed(1)}公里`,
            `预计时间: ${Math.ceil(step.time / 60)}分钟`
          ].join(' · '))
        ])
      ]),

      // 指引列表
      h('el-scrollbar', { maxHeight: '400px' }, [
        h('div', { class: 'instructions-container' }, [
          h(
            'ul',
            { class: 'step-instructions' },
            step.instructions.map((text, i) =>
              h('li', { key: i, class: 'instruction-item' }, [
                h('div', { class: 'instruction-number' }, `${i + 1}`),
                h('div', { class: 'instruction-content' }, text.replace(/<[^>]+>/g, '')), // 移除HTML标签
              ]),
            ),
          )
        ])
      ]),
    ]),
    confirmButtonText: '关闭',
    confirmButtonClass: 'beijing-theme-button',
  })
}

// 计算路线
async function calculateRoute() {
  if (selectedAttractions.value.length < 2) {
    ElMessage.warning('请至少选择两个景点')
    return
  }

  isCalculating.value = true

  // 清除之前的路线
  clearGraphics()

  // 获取所有景点坐标
  const points: __esri.Point[] = []
  for (const id of selectedAttractions.value) {
    const attraction = getAttractionById(id)
    if (attraction) {
      // 查询景点的几何信息
      const query = attractionsLayer!.createQuery()
      query.where = `OBJECTID = ${id}`
      query.returnGeometry = true

      const result = await attractionsLayer!.queryFeatures(query)
      if (result.features.length > 0) {
        points.push(result.features[0].geometry as __esri.Point)
      }
    }
  }

  if (points.length < 2) {
    ElMessage.error('无法获取足够的景点位置信息')
    isCalculating.value = false
    return
  }

  // 绘制景点标记
  points.forEach((point, index) => {
    const symbol = new SimpleMarkerSymbol({
      color:
        index === 0 ? [0, 122, 194] : index === points.length - 1 ? [255, 0, 0] : [255, 165, 0],
      size: 12,
      outline: {
        color: [255, 255, 255],
        width: 2,
      },
    })

    const graphic = new Graphic({
      geometry: point,
      symbol: symbol,
    })

    view.graphics.add(graphic)
    routeGraphics.push(graphic)
  })

  // 计算路线
  routeInstructions.value = []
  totalDistance.value = 0
  totalTime.value = 0

  try {
    // 分段计算路线
    for (let i = 0; i < points.length - 1; i++) {
      const start = points[i]
      const end = points[i + 1]

      // 调用高德路径规划API
      const routeResult = await getGaoDeRoute(
        `${start.longitude},${start.latitude}`,
        `${end.longitude},${end.latitude}`,
        navigationMode.value,
      )

      // 处理不同导航模式的响应
      let path: any = null
      let pathPoints: number[][] = []
      let instructions: string[] = []

      // 根据导航模式处理不同的响应格式
      switch (navigationMode.value) {
        case 'driving':
          if (routeResult && routeResult.route && routeResult.route.paths[0]) {
            path = routeResult.route.paths[0]
            // 将路径点转换为二维数组
            pathPoints = path.steps.flatMap((step) => {
              return step.polyline.split(';').map((point) => {
                const [lng, lat] = point.split(',').map(Number)
                return [lng, lat]
              })
            })
            instructions = path.steps.map((step) => step.instruction)
          }
          break

        case 'walking':
          if (routeResult && routeResult.route && routeResult.route.paths[0]) {
            path = routeResult.route.paths[0]
            // 将路径点转换为二维数组
            pathPoints = path.steps.flatMap((step) => {
              return step.polyline.split(';').map((point) => {
                const [lng, lat] = point.split(',').map(Number)
                return [lng, lat]
              })
            })
            instructions = path.steps.map((step) => step.instruction)
          }
          break

        case 'bicycling':
          if (routeResult && routeResult.data && routeResult.data.paths[0]) {
            path = routeResult.data.paths[0]
            // 将路径点转换为二维数组
            pathPoints = path.steps.flatMap((step) => {
              return step.polyline.split(';').map((point) => {
                const [lng, lat] = point.split(',').map(Number)
                return [lng, lat]
              })
            })
            instructions = path.steps.map((step) => step.instruction)
          }
          break

        case 'transit':
          if (
            routeResult &&
            routeResult.route &&
            routeResult.route.transits &&
            routeResult.route.transits[0]
          ) {
            const transit = routeResult.route.transits[0]
            path = {
              distance: transit.distance,
              duration: transit.duration,
            }

            // 将所有段的路径点合并
            transit.segments.forEach((segment) => {
              // 步行段
              if (segment.walking && segment.walking.steps) {
                segment.walking.steps.forEach((step) => {
                  const points = step.polyline.split(';').map((point) => {
                    const [lng, lat] = point.split(',').map(Number)
                    return [lng, lat]
                  })
                  pathPoints = [...pathPoints, ...points]
                })
              }

              // 公交段
              if (segment.bus && segment.bus.buslines) {
                segment.bus.buslines.forEach((busline) => {
                  const points = busline.polyline.split(';').map((point) => {
                    const [lng, lat] = point.split(',').map(Number)
                    return [lng, lat]
                  })
                  pathPoints = [...pathPoints, ...points]
                })
              }
            })

            // 收集指引信息
            transit.segments.forEach((segment) => {
              // 步行段指引
              if (segment.walking && segment.walking.steps) {
                segment.walking.steps.forEach((step) => {
                  instructions.push(step.instruction)
                })
              }

              // 公交段指引
              if (segment.bus && segment.bus.buslines) {
                segment.bus.buslines.forEach((busline) => {
                  instructions.push(
                    `乘坐${busline.name}，从 ${busline.departure_stop.name} 到 ${busline.arrival_stop.name}`,
                  )
                })
              }
            })
          }
          break
      }

      // 如果有有效路径，绘制路线并添加指引
      if (path && pathPoints.length > 0) {
        // 创建路线图形
        const routeLine = new Graphic({
          geometry: new Polyline({
            paths: [pathPoints],
          }),
          symbol: new SimpleLineSymbol({
            color: [0, 122, 194, 0.8],
            width: 4,
          }),
        })

        view.graphics.add(routeLine)
        routeGraphics.push(routeLine)

        // 添加路线指引
        const startName =
          getAttractionById(selectedAttractions.value[i])?.SpotName || `景点${i + 1}`
        const endName =
          getAttractionById(selectedAttractions.value[i + 1])?.SpotName || `景点${i + 2}`

        routeInstructions.value.push({
          start: startName,
          end: endName,
          distance: Number(path.distance),
          time: Number(path.duration),
          instructions: instructions,
        })

        // 累计总距离和时间
        totalDistance.value += Number(path.distance)
        totalTime.value += Number(path.duration)
      }
    }

    // 显示路线详情
    showRouteDetails.value = true
    ElMessage.success('路线规划成功')
  } catch (error) {
    console.error('路线规划失败', error)
    ElMessage.error('路线规划失败')
  } finally {
    isCalculating.value = false
  }
}

// 清除地图上的图形
function clearGraphics() {
  view.graphics.removeAll()
  routeGraphics.length = 0
}

// 清空路线
function clearRoute() {
  clearGraphics()
  selectedAttractions.value = []
  routeInstructions.value = []
  showRouteDetails.value = false
  isNavigating.value = false
}

// 开始导航
function startNavigation() {
  if (routeInstructions.value.length === 0) {
    ElMessage.warning('请先规划路线')
    return
  }

  isNavigating.value = true
  currentStepIndex.value = 0
  updateNavigationInfo()

  ElNotification({
    title: '导航已开始',
    message: '请按照指引前往目的地',
    type: 'success',
    duration: 3000,
  })
}

// 更新导航信息
function updateNavigationInfo() {
  // 获取当前路段的第一个指令
  if (routeInstructions.value.length > 0) {
    const currentSection = routeInstructions.value[0]
    const allInstructions = currentSection.instructions

    if (allInstructions.length > 0) {
      currentNavigationStep.value = allInstructions[currentStepIndex.value]

      if (currentStepIndex.value < allInstructions.length - 1) {
        nextNavigationStep.value = allInstructions[currentStepIndex.value + 1]
      } else {
        nextNavigationStep.value = '到达目的地'
      }

      // 更新进度
      navigationProgress.value = (currentStepIndex.value / allInstructions.length) * 100
    }
  }

  // 模拟导航进度，实际应基于位置更新
  simulateNavigation()
}

// 模拟导航进度
function simulateNavigation() {
  if (!isNavigating.value) return

  setTimeout(() => {
    if (routeInstructions.value.length > 0) {
      const currentSection = routeInstructions.value[0]
      const allInstructions = currentSection.instructions

      if (currentStepIndex.value < allInstructions.length - 1) {
        currentStepIndex.value++
        updateNavigationInfo()
      } else {
        // 完成第一段导航，移除第一段
        if (routeInstructions.value.length > 1) {
          routeInstructions.value.shift()
          currentStepIndex.value = 0
          updateNavigationInfo()
        } else {
          // 全部导航完成
          completeNavigation()
        }
      }
    }
  }, 8000) // 每8秒更新一次导航状态
}

// 完成导航
function completeNavigation() {
  isNavigating.value = false
  ElNotification({
    title: '导航完成',
    message: '您已到达最终目的地',
    type: 'success',
  })
}

// 停止导航 - 保留供将来使用
// function stopNavigation() {
//   isNavigating.value = false
//   ElMessage.info('导航已结束')
// }

// 格式化时间显示
function formatHours(val: number) {
  return `${val}小时`
}

// 格式化进度条显示
function progressFormat(percentage: number) {
  return Math.round(percentage) + '%'
}

// 筛选景点
function filterAttractions() {
  // 先根据搜索关键词筛选
  let result = attractions.value.filter((attraction) => {
    if (searchQuery.value && attraction.SpotName) {
      return attraction.SpotName.toLowerCase().includes(searchQuery.value.toLowerCase())
    }
    return true
  })

  // 根据景点类型筛选
  if (filters.spotType) {
    result = result.filter((attraction) => attraction.SpotType === filters.spotType)
  }

  // 根据保护级别筛选
  if (filters.protectionLevel) {
    result = result.filter((attraction) => attraction.ProtectionLevel === filters.protectionLevel)
  }

  // 根据保护状态筛选
  if (filters.protectionStatus) {
    result = result.filter((attraction) => attraction.ProtectionStatus === filters.protectionStatus)
  }

  // 根据建设年份筛选
  if (filters.constructionYear) {
    result = result.filter((attraction) => {
      if (!attraction.ConstructionYear) return false

      const year = attraction.ConstructionYear
      switch (filters.constructionYear) {
        case 'before-ming':
          return /元|宋|唐|汉|周|秦|晋/.test(year)
        case 'ming':
          return /明/.test(year)
        case 'qing':
          return /清/.test(year)
        case 'minguo':
          return /民国/.test(year)
        case 'after-1949':
          return /\d{4}年/.test(year) && parseInt(year) >= 1949
        default:
          return true
      }
    })
  }

  filteredAttractions.value = result
}

// 重置筛选条件
function resetFilters() {
  searchQuery.value = ''
  Object.keys(filters).forEach((key) => {
    filters[key as keyof typeof filters] = ''
  })
  filteredAttractions.value = [...attractions.value]
}

// 选择景点
function selectAttraction(attraction: Attraction) {
  currentAttraction.value = attraction
  showAttractionInfo.value = true

  // 查询景点的几何信息并定位到地图上
  if (attractionsLayer) {
    const query = attractionsLayer.createQuery()
    query.where = `OBJECTID = ${attraction.OBJECTID}`
    query.returnGeometry = true

    attractionsLayer.queryFeatures(query).then((result) => {
      if (result.features.length > 0) {
        const point = result.features[0].geometry as __esri.Point
        view.goTo(
          {
            target: point,
            zoom: 17,
          },
          { duration: 1000 },
        )
      }
    })
  }
}

// 截断文本
function truncateText(text: string, maxLength: number): string {
  if (!text) return ''
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}
</script>

<style scoped>
/* 基础容器样式 */
.visitor-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #f9f9f9;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 分屏布局 */
.split-screen-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* 左侧面板 */
.left-panel {
  width: 360px;
  height: 100%;
  background-color: #f8f4e6;
  border-right: 1px solid #e8d8c3;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* 右侧地图区域 */
.right-panel {
  flex: 1;
  height: 100%;
  position: relative;
}

.visitor-map-view {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 搜索面板 */
.search-panel {
  padding: 20px;
}

.panel-title {
  font-size: 22px;
  color: #8a1a1a;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8d8c3;
  position: relative;
}

.panel-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 80px;
  height: 2px;
  background-color: #c8161d;
}

.search-box {
  margin-bottom: 20px;
}

/* 筛选区域 */
.filter-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.filter-header h3 {
  font-size: 16px;
  color: #8a1a1a;
  margin: 0;
}

.filter-item {
  margin-bottom: 15px;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.filter-item .el-select {
  width: 100%;
}

/* 结果列表 */
.results-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.results-header h3 {
  font-size: 16px;
  color: #8a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
}

.attraction-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attraction-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f4e6;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.attraction-item:hover {
  background-color: #f0e6d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.attraction-item.active {
  background-color: #f0e6d2;
  border-left: 3px solid #c8161d;
}

.attraction-item h4 {
  margin: 0 0 10px 0;
  color: #8a1a1a;
  font-size: 16px;
}

.attraction-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.attraction-brief {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 智能规划按钮 - 北京风格 */
.plan-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  border-left: 4px solid #c8161d; /* 中国红 */
  color: #333;
  font-weight: 500;
}

.plan-button:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.plan-button .el-icon {
  color: #c8161d;
  font-size: 18px;
}

/* 抽屉样式 - 传统风格 */
.custom-drawer :deep(.el-drawer__body) {
  padding: 0;
  overflow-y: auto;
  background-color: #f8f4e6; /* 粉黄色调，粉纸感 */
}

.custom-drawer :deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 0;
  background-color: #f8f4e6;
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #e8d8c3;
  margin-bottom: 20px;
  background-color: #f8f4e6;
}

/* 景点详情 - 中国传统风格 */
.attraction-detail {
  padding: 0 20px 30px;
  background-color: #f8f4e6;
  color: #333;
}

.attraction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 0;
  border-bottom: 2px solid #e8d8c3;
}

.attraction-header h2 {
  font-size: 24px;
  color: #8a1a1a; /* 深红色，传统风格 */
  font-weight: bold;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.attraction-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 24px;
  background-color: #c8161d;
  border-radius: 3px;
}

.attraction-image {
  width: 100%;
  height: 220px;
  margin-bottom: 25px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 5px solid #fff;
}

.attraction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.attraction-image:hover img {
  transform: scale(1.05);
}

.attraction-intro {
  margin-bottom: 25px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #c8161d;
}

.attraction-intro p {
  line-height: 1.8;
  color: #333;
  text-align: justify;
  margin: 0;
  font-size: 15px;
}

/* 景点信息区域 */
.attraction-info-section {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 景点类型标签 */
.attraction-type {
  margin: 0 0 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.attraction-type .el-tag {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 500;
}

/* 建设年份 */
.construction-year {
  margin-top: 12px;
  font-size: 15px;
  background-color: #f0e6d2;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
}

.info-label {
  font-weight: bold;
  margin-right: 8px;
  color: #8a1a1a;
}

/* 各个信息区域 */
.attraction-section {
  margin-top: 25px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #e8d8c3;
}

.attraction-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #8a1a1a;
  position: relative;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8d8c3;
}

.attraction-section p {
  line-height: 1.8;
  color: #333;
  text-align: justify;
  margin: 0;
  font-size: 15px;
}

/* 知识点列表 */
.knowledge-points-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.knowledge-point-tag {
  margin-bottom: 10px;
  background-color: #f0e6d2;
  color: #8a1a1a;
  border: 1px solid #e8d8c3;
  transition: all 0.3s ease;
}

.knowledge-point-tag:hover {
  background-color: #e8d8c3;
  transform: translateY(-2px);
}

/* 规划面板 */
.planning-panel {
  padding-bottom: 20px;
  background-color: #f8f4e6;
}

.preference-section {
  padding: 20px;
  border-bottom: 1px solid #e8d8c3;
}

.preference-section h3,
.selected-spots-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  color: #8a1a1a;
}

.count-badge {
  margin-left: 10px;
  background-color: #c8161d;
  color: white;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 10px;
}

.selected-spots-section {
  padding: 20px;
}

.timeline-spot-item {
  display: flex;
  gap: 10px;
}

.navigation-mode-section {
  margin-top: 20px;
}

.navigation-mode-section h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #8a1a1a;
}

.navigation-mode-section .el-radio-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.route-planning-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.full-width-btn {
  width: 100%;
}

/* 路线卡片 */
.route-card {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 340px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 18px;
  z-index: 1000;
  animation: slideIn 0.4s ease-out;
  border-top: 4px solid #c8161d;
}

@keyframes slideIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8d8c3;
}

.route-header h3 {
  color: #8a1a1a;
  margin: 0;
  font-size: 18px;
}

.close-btn {
  align-self: flex-start;
}

.route-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.navigation-mode-info {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 8px 12px;
  background-color: #f0e6d2;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.navigation-mode-info:hover {
  background-color: #e8d8c3;
}

.mode-label {
  margin-right: 10px;
  font-weight: bold;
  color: #8a1a1a;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: #f0e6d2;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.summary-item:hover {
  background: #e8d8c3;
  transform: translateY(-2px);
}

.summary-item .el-icon {
  color: #8a1a1a;
  font-size: 20px;
  margin-bottom: 5px;
}

.step-info {
  padding: 15px;
  background-color: #f8f4e6;
  margin-bottom: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #e8d8c3;
}

.step-info:hover {
  background-color: #f0e6d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.step-icon .el-icon {
  font-size: 20px;
  color: white;
}

.mode-driving {
  background-color: #c8161d;
}

.mode-walking {
  background-color: #67c23a;
}

.mode-bicycling {
  background-color: #e6a23c;
}

.mode-transit {
  background-color: #409eff;
}

.step-title-container {
  flex: 1;
}

.step-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #8a1a1a;
  font-size: 16px;
}

.step-detail {
  color: #666;
  font-size: 0.9em;
  display: flex;
  align-items: center;
}

.step-detail .distance {
  font-weight: 500;
  color: #8a1a1a;
}

.step-detail .separator {
  margin: 0 8px;
  color: #999;
}

.step-detail .time {
  color: #666;
}

.step-preview {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px dashed #e8d8c3;
}

.preview-text {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 6px;
}

.preview-text span {
  display: block;
  line-height: 1.5;
  position: relative;
  padding-left: 15px;
}

.preview-text span:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #8a1a1a;
}

.step-count {
  text-align: right;
  font-size: 0.8em;
  color: #999;
}

.view-details-btn {
  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-details-btn .el-icon {
  margin-right: 5px;
}

.card-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.el-button + .el-button {
  margin-left: 0px;
}

/* 导航提示框 */
.navigation-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 100;
  border-left: 4px solid #c8161d;
}

.hint-content {
  margin-bottom: 15px;
}

.current-instruction {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.next-step {
  font-size: 14px;
  color: #666;
  background-color: #f0e6d2;
  padding: 8px 12px;
  border-radius: 4px;
  display: block;
  margin-top: 8px;
}

/* 自定义Element Plus组件样式 */
:deep(.el-collapse) {
  border: none;
  background-color: transparent;
}

:deep(.el-collapse-item__header) {
  background-color: #f0e6d2;
  border-radius: 4px;
  padding: 0 10px;
  height: 48px;
  line-height: 48px;
  color: #8a1a1a;
  font-weight: 500;
  border-bottom: none;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

:deep(.el-collapse-item__header:hover) {
  background-color: #e8d8c3;
}

:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border-bottom: none;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 10px;
}

:deep(.el-button--primary) {
  background-color: #c8161d;
  border-color: #c8161d;
}

:deep(.el-button--primary:hover) {
  background-color: #a01419;
  border-color: #a01419;
}

:deep(.el-button--danger) {
  background-color: #8a1a1a;
  border-color: #8a1a1a;
}

:deep(.el-button--danger:hover) {
  background-color: #701515;
  border-color: #701515;
}

:deep(.el-tag--danger) {
  background-color: #fef0f0;
  border-color: #fbc4c4;
  color: #c8161d;
}

:deep(.el-tag--success) {
  background-color: #f0f9eb;
  border-color: #c2e7b0;
  color: #67c23a;
}

:deep(.el-tag--primary) {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #409eff;
}

:deep(.el-tag--info) {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}

:deep(.el-tag--warning) {
  background-color: #fdf6ec;
  border-color: #f5dab1;
  color: #e6a23c;
}

/* 路线详细指引弹窗样式 */
:deep(.route-details-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.route-details-dialog .el-message-box__header) {
  background-color: #f0e6d2;
  padding: 15px 20px;
  border-bottom: 1px solid #e8d8c3;
}

:deep(.route-details-dialog .el-message-box__title) {
  color: #8a1a1a;
  font-weight: 600;
  font-size: 18px;
}

:deep(.route-details-dialog .el-message-box__content) {
  padding: 0;
}

:deep(.route-details-dialog .el-message-box__message) {
  padding: 0;
  margin: 0;
}

.route-details-container {
  padding: 0;
}

.route-summary-banner {
  padding: 20px;
  background-color: #f8f4e6;
  border-bottom: 1px solid #e8d8c3;
  text-align: center;
}

.route-summary-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.route-mode-text {
  font-size: 18px;
  font-weight: 600;
  color: #8a1a1a;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid #e8d8c3;
}

.route-stats {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.instructions-container {
  padding: 20px;
}

.step-instructions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.instruction-item {
  display: flex;
  margin-bottom: 15px;
  padding: 12px 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.instruction-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #fefbf3;
}

.instruction-item:last-child {
  margin-bottom: 0;
}

.instruction-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #c8161d;
}

.instruction-number {
  width: 28px;
  height: 28px;
  background-color: #f0e6d2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #8a1a1a;
  margin-right: 12px;
  flex-shrink: 0;
  border: 1px solid #e8d8c3;
}

.instruction-content {
  flex: 1;
  line-height: 1.6;
  color: #333;
  font-size: 15px;
}

:deep(.route-details-dialog .el-message-box__btns) {
  padding: 15px 20px;
  border-top: 1px solid #e8d8c3;
  display: flex;
  justify-content: center;
}

:deep(.beijing-theme-button) {
  background-color: #c8161d;
  border-color: #c8161d;
  color: white;
  padding: 10px 30px;
  font-size: 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

:deep(.beijing-theme-button:hover) {
  background-color: #a01419;
  border-color: #a01419;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 22, 29, 0.3);
}
</style>
